<script setup>
import { onMounted, ref } from "vue";
import dayjs from "dayjs";
import cloneDeep from "lodash/cloneDeep";
import { myIncomeApi } from "@/services/income";
import { handleGoBack } from "@/utils/router";
import useFormat from "@/hooks/format";
import CustomizeTopBar from "../../pages/components/customize-top-bar/CustomizeTopBar.vue";

const { formatCommas } = useFormat();
const statusBarHeight = ref(0);
const menuButtonInfo = ref(null);
// 响应式数据
//兼容小程序
// #ifdef MP-WEIXIN
menuButtonInfo.value = uni.getMenuButtonBoundingClientRect();
// #endif
statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;

// 可选的最大时间（时间戳毫秒）
const filterDateMax = ref(undefined);
// 可选的最小时间（时间戳毫秒）
const filterDateMin = ref(undefined);
// form values
const filterFormValues = ref({
  filterDate: undefined, // 搜索日期
});
// init data loading
const initDataLoading = ref(true);
// api得到的数据 展示
const showDetail = ref(undefined);

// 改变日期
const handChangeDate = (item) => {
  filterFormValues.value.filterDate = item.detail.value;
  initData();
};

// 前往查看更多明细
const goIncomeList = () => {
  uni.navigateTo({
    url: "/pages/income-list/Index",
  });
};

// go back
const goBack = () => {
  handleGoBack();
};

// init
const initData = async () => {
  try {
    initDataLoading.value = true;
    const paramsData = cloneDeep({
      date:
        (filterFormValues.value.filterDate &&
          dayjs(filterFormValues.value.filterDate).format(`YYYY-MM`)) ||
        undefined,
    });
    const results = await Promise.all([myIncomeApi(paramsData)]);
    showDetail.value = results[0].data;
    initDataLoading.value = false;
  } catch (error) {
    initDataLoading.value = false;
  }
};

onMounted(() => {
  filterDateMax.value = dayjs().format("YYYY-MM");
  filterDateMin.value = dayjs().subtract(2, "year").format("YYYY-MM");
  filterFormValues.value.filterDate = dayjs().startOf("month").valueOf();
  initData();
});
</script>

<template>
  <!-- <up-skeleton :loading="true" :animate="false" avatar rows="2"></up-skeleton> -->
  <view class="my-content u-skeleton">
    <customize-top-bar title="我的收入">
      <template v-slot:bgView>
        <view class="mycontent-top-bc"></view>
      </template>
    </customize-top-bar>

    <view class="container">
      <view class="statistics-warp">
        <view class="statistics-top-warp">
          <text class="statistics-title">我的收入统计</text>
          <view class="filter-date-warp">
            <view class="filter-date-item">
              <view class="filter-date-text">
                <picker
                  mode="date"
                  :value="filterFormValues.filterDate"
                  :start="filterDateMin"
                  fields="month"
                  :end="filterDateMax"
                  @change="handChangeDate"
                >
                  <view class="uni-input">
                    {{
                      dayjs(filterFormValues.filterDate).format(`YYYY年MM月`)
                    }}
                  </view>
                </picker>
                <uni-icons type="down" size="14"></uni-icons>
              </view>
            </view>
          </view>
        </view>
        <view class="data-number-warp">
          <up-row v-if="!initDataLoading">
            <up-col span="6">
              <view>
                <view class="data-value">
                  <up-count-to
                    :decimals="2"
                    :endVal="showDetail?.total?.income_price"
                    separator=","
                    :duration="500"
                    color="#000"
                    fontSize="26"
                    bold
                  ></up-count-to>
                </view>
                <view class="data-label">
                  <text>收入(已出账)</text>
                </view>
              </view>
            </up-col>
            <up-col span="6">
              <view>
                <view class="data-value">
                  <up-count-to
                    :decimals="2"
                    :endVal="showDetail?.total?.grade_price"
                    separator=","
                    color="#000"
                    :duration="500"
                    fontSize="26"
                    bold
                  ></up-count-to>
                </view>
                <view class="data-label">
                  <text>总业绩(直推+间接)</text>
                </view>
              </view>
            </up-col>
          </up-row>
          <view v-else>
            <up-loading-icon></up-loading-icon>
          </view>
          <up-divider></up-divider>
          <view class="view-btn" @click="goIncomeList">
            查看更多明细
            <uni-icons type="right" size="14" color="#D49E3B"></uni-icons>
          </view>
        </view>
      </view>
      <view class="data-number-warp mb-1">
        <view class="data-title-warp">
          <view class="title-line"></view>
          <text>直推订单</text>
        </view>
        <view v-if="!initDataLoading">
          <up-row customStyle="margin-bottom: 40rpx">
            <up-col span="6">
              <view>
                <view class="data-value">
                  <text>
                    {{
                      (showDetail?.direct?.reward_price &&
                        formatCommas(showDetail?.direct?.reward_price)) ||
                      "0.00"
                    }}
                  </text>
                </view>
                <view class="data-label">
                  <text>本月直推收入(元）</text>
                </view>
              </view>
            </up-col>
            <up-col span="6">
              <view>
                <view class="data-value">
                  <text>
                    {{
                      (showDetail?.direct?.order_price &&
                        formatCommas(showDetail?.direct?.order_price)) ||
                      "0.00"
                    }}
                  </text>
                </view>
                <view class="data-label">
                  <text>本月成交金额(元）</text>
                </view>
              </view>
            </up-col>
          </up-row>
          <up-row>
            <up-col span="6">
              <view>
                <view class="data-value">
                  <text>
                    {{
                      (showDetail?.direct?.person_num &&
                        formatCommas(showDetail?.direct?.person_num)) ||
                      "0"
                    }}
                  </text>
                </view>
                <view class="data-label">
                  <text>本月邀请人数(人）</text>
                </view>
              </view>
            </up-col>
            <up-col span="6">
              <view>
                <view class="data-value">
                  <text>
                    {{
                      (showDetail?.direct?.order_num &&
                        formatCommas(showDetail?.direct?.order_num)) ||
                      "0"
                    }}
                  </text>
                </view>
                <view class="data-label">
                  <text>本月订单总数(单）</text>
                </view>
              </view>
            </up-col>
          </up-row>
        </view>
        <view v-else>
          <up-skeleton rows="3" loading animate></up-skeleton>
        </view>
      </view>
      <view class="data-number-warp mb-1">
        <view class="data-title-warp">
          <view class="title-line red-bg"></view>
          <text>间接订单</text>
        </view>
        <view v-if="!initDataLoading">
          <up-row customStyle="margin-bottom: 40rpx">
            <up-col span="6">
              <view>
                <view class="data-value">
                  <text>
                    {{
                      (showDetail?.indirect?.reward_price &&
                        formatCommas(showDetail?.indirect?.reward_price)) ||
                      "0.00"
                    }}
                  </text>
                </view>
                <view class="data-label">
                  <text>本月间接收入(元）</text>
                </view>
              </view>
            </up-col>
            <up-col span="6">
              <view>
                <view class="data-value">
                  <text>
                    {{
                      (showDetail?.indirect?.order_price &&
                        formatCommas(showDetail?.indirect?.order_price)) ||
                      "0.00"
                    }}
                  </text>
                </view>
                <view class="data-label">
                  <text>本月成交金额(元）</text>
                </view>
              </view>
            </up-col>
          </up-row>
          <up-row>
            <up-col span="6">
              <view>
                <view class="data-value">
                  <text>
                    {{
                      (showDetail?.indirect?.person_num &&
                        formatCommas(showDetail?.indirect?.person_num)) ||
                      "0"
                    }}
                  </text>
                </view>
                <view class="data-label">
                  <text>本月推广注册(人）</text>
                </view>
              </view>
            </up-col>
            <up-col span="6">
              <view>
                <view class="data-value">
                  <text>
                    {{
                      (showDetail?.indirect?.order_num &&
                        formatCommas(showDetail?.indirect?.order_num)) ||
                      "0"
                    }}
                  </text>
                </view>
                <view class="data-label">
                  <text>本月成交笔数(单）</text>
                </view>
              </view>
            </up-col>
          </up-row>
        </view>
        <view v-else>
          <up-skeleton rows="3" loading animate></up-skeleton>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import "Index.scss";
</style>
